<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

${ng_app}
<script>
    var word = ${empty word ? "null" : word};
    $(function() {
        if (null != word) {
            $('#definition').html(word.entries[word.selectedEntryIndex].definition);
        }
    });
</script>
<link href="/res/dict.css" rel="stylesheet" type="text/css"></link>
<style>
    a.entry-link {
        background-image: url(<c:url value='/images/bullet-circle.gif' />);
    }

    #entries {
        float:left;
        width:160px;
        height: 100%;
    }

    #definition {
        float:right;
        width:500px;
        border:1px solid black;
    }

    #container {
        margin: 10px;
        border:1px solid black;
    }
    
    div.entry {
        margin:0px;
    }
</style>
<div id="container" ng-controller="DictionaryController" >
    <div id="search_bar">
        <input id='search_term' ng-model="search_term" />
        <span class="button" ng-click="search()">Search</span>
        <span>{{search_term}}</span>
    </div>
    <div style="clear:both"></div>
    <div id="entries"> </div>
    <div class="entry" id="definition"></div>
    <div style="clear:both"></div>
    <!--
<div id="defi">
    <div ng-repeat='e in entries()'>
        <span ng-click='entry($index)'>{{e.text}}</span>
    </div>
    <div class='entry' ng-bind-html='definition()'></div> 
</div>
    -->
</div>